import React from "react"
import ReactDOM from "react-dom"
// export default class Hooks extends React.Component {
//   state = { count: 0 }
//   add = () => {
//     this.setState({ count: this.state.count + 1 })
//   }
//   render() {
//     return (
//       <>
//         <div>hooks</div>
//         <h2>当前求和为{this.state.count}</h2>
//         <button onClick={this.add}>点我+1</button>
//       </>
//     )
//   }
// }

export default function Hooks() {
  const [count, setCount] = React.useState(0)
  // 让函数式组件可以使用state
  // console.log(count, setCount)

  // 定义一个ref
  //   const myRef = React.useRef()

  /*
    不加第二个参数 检测所有人
    加第二个参数[] 谁都不检测 里面存放检测的对象
    return 是进行收尾工作的
   */
  React.useEffect(() => {
    // 相当于组件挂载和组件更新生命周期钩子
    let timer = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)

    return () => {
      // 相当于卸载组件的生命周期
      clearInterval(timer)
    }
  }, [count])

  function add() {
    // setCount(count + 1)
    setCount((count) => count + 1)
  }
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    // ReactDOM.unmountComponentAtNode(document.querySelector("#root"))
  }
  return (
    <div id="test">
      <div>hooks</div>
      <h2>当前求和为{count}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={unmount}>卸载组件</button>
    </div>
  )
}
